<template lang="pug">
div
  .flexBox
    form-box(
      ref="searchForm",
      :fields="searchConfig",
      :isFilter="true",
      :submitHandle="searchHandle"
    )
    <!--.operator-->
      <!--el-button.gradientVertical(-->
        <!--size="large",-->
        <!--@click="() => exhortHandle()",-->
        <!--round,-->
        <!--:disabled="!className"-->
      <!--) 叮咛-->
  section.tableBox(v-for="item in columnsObj", :key="item.key")
    //- h2 {{item.title}}
    div.table-empty
      s-table(
        :column="item.column",
        :style="{ padding: 0 }",
        :dataPops="tableData[item.key]"
        :loading="loading"
      )
  exhort-modal(
    :visible.sync="modalObj.visible",
    :classesId="classId",
    :className="className"
  )
</template>
<script>
import { getClassesByArea } from '@/api/common'
import { columnsObj } from './config'
import { getDailyList } from '../../api'
import ExhortModal from './exhortModal'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
export default {
  name: 'Conservation',
  components: {
    ExhortModal
  },
  data () {
    return {
      loading: false,
      columnsObj,
      tableData: {
        timeline: []
      },
      classes: [],
      classId: '',
      modalObj: {
        visible: false
      },
      params: {
        daily: dayjs().format('YYYY/MM/DD')
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          label: '选择班级',
          key: 'classId',
          type: 'select',
          initialValue: this.classId,
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.change(val)
          }
        },
        {
          label: '选择日期',
          key: 'daily',
          type: 'date',
          initialValue: dayjs().format('YYYY/MM/DD')
        }
      ]
    },
    className () {
      const { classes, classId } = this
      return classes.find(x => x.classesId === classId)?.classesName || ''
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    // 获取列表
    getList (params = {}) {
      this.tableData.timeline = []
      this.loading = true
      getDailyList({ pageNum: 0, pageSize: 99, ...params }).then(res => {
        // console.log(res)
        const data = res.content
        data.map(item => {
          let gender = ''
          if (item.feedingStatus && item.feedingStatus !== '') {
            gender = '食量:' + item.feedingStatus
          }
          if (item.pottyStatus && item.pottyStatus !== '') {
            gender = gender + ' 排便情况:' + item.pottyStatus
          }
          if (item.sleepStatus && item.sleepStatus !== '') {
            gender = gender + ' 睡眠情况:' + item.sleepStatus
          }
          if (item.temperature && item.temperature !== '') {
            gender = gender + ' 体温:' + (item.temperature / 10)
          }
          const obj = { childrenName: item.childName, gender: gender }
          if (item.feedingRecords.length > 0) {
            item.feedingRecords.map(item2 => {
              console.log(item2)
              const time = this.getTime(item2.eventTime)
              if (Object.prototype.hasOwnProperty.call(obj, time)) {
                obj[`${time}`] = obj[`${time}`] + ',' + item2.food
              } else {
                obj[`${time}`] = item2.food
              }
            })
          }
          if (item.pottyRecords.length > 0) {
            item.pottyRecords.map(item2 => {
              const time = this.getTime(item2.eventTime)
              if (Object.prototype.hasOwnProperty.call(obj, time)) {
                obj[`${time}`] = obj[`${time}`] + ',' + item2.typeStr
              } else {
                obj[`${time}`] = item2.typeStr
              }
            })
          }
          if (item.sleepRecords.length > 0) {
            item.sleepRecords.map(item2 => {
              const time = this.getTime(item2.eventTime)
              // obj[`${time}`] = item2.remark
              if (Object.prototype.hasOwnProperty.call(obj, time)) {
                obj[`${time}`] = obj[`${time}`] + ',' + item2.remark
              } else {
                obj[`${time}`] = item2.remark
              }
            })
          }
          if (item.temperatureRecords.length > 0) {
            item.temperatureRecords.map(item2 => {
              const time = this.getTime(item2.eventTime)
              // obj[`${time}`] = item2.remark
              if (Object.prototype.hasOwnProperty.call(obj, time)) {
                obj[`${time}`] = obj[`${time}`] + ':' + (item.temperature / 10)
              } else {
                obj[`${time}`] = (item.temperature / 10)
              }
            })
          }
          this.tableData.timeline.push(obj)
        })
        console.log(this.tableData, 56657)
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId, category: 1 }) || [])
      this.classId = this.classes[0]?.id || ''
      this.change(this.classId)
    },
    // 查询
    searchHandle (values) {
      console.log(values)
      this.params = values
      this.getList(values)
    },
    change (values) {
      this.params.classId = values
      this.getList(this.params)
    },
    // 时间的转化
    getTime (mills) {
      // var mills = '1641554050000'
      // 每半小时毫秒数
      var millsPerHalfHour = 30 * 60 * 1000
      // 计算新的毫秒数
      var newMills = Math.floor(mills / millsPerHalfHour) * millsPerHalfHour
      var newDate = new Date(newMills)
      const allDate = dayjs(newDate).format('YYYY-MM-DD HH:mm')
      // console.log(allDate.split(' ')[1])
      return allDate.split(' ')[1]
    },
    exhortHandle () {
      this.modalObj = {
        visible: true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.flexBox {
  display: flex;
  justify-content: space-between;
}
.tableBox {
  margin-top: 16px;
}
</style>
